<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/order_manage/order_list' }"> <i class="el-icon-lx-cascades"></i> 订单管理 </el-breadcrumb-item>
                <el-breadcrumb-item>[{{ this.$route.query.title }}] 订单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- 下单流程 -->
            <div v-if="tableData.paid == 1" class="panel panel-warning order_orders">
                <div class="panel-heading">下单流程</div>
                <div class="panel-body">
                    <el-steps :active="tableData.evaluate == 0 ? 3 : 4" align-center>
                        <el-step title="生成订单"></el-step>
                        <el-step title="在线支付"></el-step>
                        <el-step title="在线学习"></el-step>
                        <el-step title="完成评价"></el-step>
                    </el-steps>
                </div>
            </div>
            <!-- 订单信息 -->
            <div class="panel panel-info order_orders">
                <div class="panel-heading">订单信息</div>
                <div class="panel-body">
                    <ul>
                        <li>
                            <span>系统订单号：</span><span style="margin-left: 18px">{{ tableData.order_no }}</span>
                        </li>
                        <li>
                            <span>下单时间：</span><span class="ml">{{ tableData.create_time }}</span>
                        </li>
                        <li><span>支付类型：</span><span class="ml">在线支付</span></li>
                        <li>
                            <span>订单类型：</span
                            ><span class="ml">
                                <span>
                                    <span v-if="tableData.order_info_type == 'discount'">限时折扣</span>
                                    <span v-else-if="tableData.order_info_type == 'invite'">请好友看</span>
                                    <span v-else>普通订单</span>
                                </span>
                                <span v-if="tableData.ucp_id > 0">
                                    <span>,优惠券订单</span>
                                </span>
                            </span>
                        </li>
                        <!-- <li><span>优惠信息：</span><span class="ml">{{tableData.order_info_type}}</span></li> -->
                        <li><span>支付类型：</span><span class="ml">微信支付</span></li>
                        <!-- <li><span>营销活动：</span><span class="ml">{{tableData.ucp_id>0'微信支付':'支付宝支付'}}</span></li> -->
                        <li>
                            <span>价格：</span><span style="margin-left: 53px">￥ {{ tableData.price }}</span>
                        </li>
                        <li>
                            <span>实付金额：</span><span class="ml">￥ {{ tableData.paid_fee }}</span>
                        </li>
                        <li>
                            <span>支付状态：</span>
                            <span class="ml" v-if="tableData.paid == 0" style="color: red">待支付</span>
                            <span class="ml" v-if="tableData.paid == 1" style="color: #38b03f">交易完成</span>
                            <span class="ml" v-if="tableData.paid == 2" style="color: orange">可以退款(已支付)</span>
                            <span class="ml" v-if="tableData.paid == 3" style="color: red">已退款(交易关闭)</span>
                            <span class="ml" v-if="tableData.paid == -1" style="color: red">未付款(交易关闭)</span>
                        </li>
                        <li>
                            <span>支付时间：</span><span class="ml">{{ tableData.paid_time }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 用户信息 -->
            <div class="panel panel-info order_orders">
                <div class="panel-heading">用户信息</div>
                <div class="panel-body">
                    <p>用户：{{ tableData.nickname }}</p>
                    <p>注册时间：{{ tableData.member_creattime }}</p>
                </div>
            </div>
            <!-- 商品信息 -->
            <div class="goodInfo">
                <el-table :data="goodInfo" class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column label="商品信息">
                        <template slot-scope="scope">
                            <div class="course-info-wrapper">
                                <div class="img-wrapper">
                                    <img :src="scope.row.cover" alt="" class="info-image" />
                                </div>
                                <div class="info-detail">
                                    <div class="title">
                                        <span>{{ scope.row.title }}</span>
                                    </div>
                                    <span>{{ scope.row.description }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.product_type }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格">
                        <template slot-scope="scope">
                            <span class="red">{{ '¥ ' + scope.row.price }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 商品评价 -->
            <div class="panel panel-success order_orders">
                <div class="panel-heading">商品评价</div>
                <div class="panel-body">
                    <div class="detail-evaluate-box" v-if="tableData.evaluate_info">
                        <div class="evaluate-score">
                            <el-rate v-model="form.value" disabled show-score text-color="#ff9900" score-template="{value}分"> </el-rate>
                        </div>
                        <div class="detail">
                            <p>{{ tableData.evaluate_info.content }}</p>
                        </div>
                        <div class="evaluate-add-time">
                            <p>{{ tableData.evaluate_info.create_time }}</p>
                        </div>
                        <div class="evaluate-reply">
                            <h4>官方回复</h4>
                            <p class="detail">{{ tableData.evaluate_info.reply }}</p>
                            <p>{{ tableData.evaluate_info.reply_time }}</p>
                        </div>
                        <div class="action">
                            <el-row>
                                <el-button @click="reply" type="warning" size="mini" round>回复</el-button>
                                <el-button @click="edit" type="success" size="mini" round>修改</el-button>
                                <el-button @click="del(tableData.order_no)" type="danger" size="mini" round>删除</el-button>
                            </el-row>
                        </div>
                    </div>
                    <span v-else>未评价</span>
                </div>
            </div>
        </div>
        <!-- 回复弹出框 -->
        <el-dialog title="回复" :visible.sync="replyVisible" width="30%">
            <el-input v-model="form.reply" type="textarea"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="replySave">确 认</el-button>
            </span>
        </el-dialog>
        <!-- 修改弹出框 -->
        <el-dialog title="修改" :visible.sync="editVisible" width="30%">
            <el-input v-model="form.content" type="textarea" style="margin-bottom: 20px"></el-input>
            <span>您的评分：</span
            ><el-input-number v-model="form.value" size="small" :precision="2" :step="0.1" :min="0" :max="5"></el-input-number
            ><span style="margin-left: 10px">分</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editSave">确 认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { orderDetailData, replyEvaluateData, editEvaluateData, delEvaluateData } from '../../api/index';
export default {
    // name: 'order_detail',
    data() {
        return {
            query: {
                id: this.$route.query.id
            },
            form: {
                order_no: this.$route.query.order_no,
                value: '',
                content: '',
                reply: ''
            },
            tableData: '',
            goodInfo: [],
            replyVisible: false,
            editVisible: false
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            orderDetailData(this.query).then((res) => {
                this.tableData = res.data;
                this.goodInfo.push(res.data.product);
                console.log(this.goodInfo);
                this.form.value = res.data.evaluate_info.value;
                this.form.content = res.data.evaluate_info.content;
                this.form.reply = res.data.evaluate_info.reply;
            });
        },
        reply() {
            this.replyVisible = true;
        },
        edit() {
            this.editVisible = true;
        },
        del(order_no) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                delEvaluateData({ order_no: order_no }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('删除评价成功');
                        setTimeout(() => {
                            location.reload();
                        }, 200);
                    }
                });
            });
        },
        replySave() {
            replyEvaluateData({ order_no: this.form.order_no, reply: this.form.reply }).then((res) => {
                if (res.code == 1) {
                    this.replyVisible = false;
                    this.$message.success('回复评价成功');
                    setTimeout(() => {
                        location.reload();
                    }, 200);
                }
            });
        },
        editSave() {
            editEvaluateData(this.form).then((res) => {
                if (res.code == 1) {
                    this.editVisible = false;
                    this.$message.success('修改评价成功');
                    setTimeout(() => {
                        location.reload();
                    }, 200);
                }
            });
        }
    }
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;

    border-radius: 4px;

    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
.panel-warning {
    border-color: #ffdcbc;
}
.panel-heading {
    padding: 8px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-warning .panel-heading {
    color: #f1a325;
    background-color: #fff0d5;
    border-color: #ffdcbc;
}
.panel-body {
    padding: 15px;
}
.panel-info {
    border-color: #a2e4de;
}
.panel-info .panel-heading {
    color: #03b8cf;
    background-color: #ddf3f5;
    border-color: #a2e4de;
}
.panel-body li {
    line-height: 36px;
    border-bottom: 1px solid #eee;
}
.panel-body li:last-child {
    border-bottom: 0;
}
.ml {
    margin-left: 30px;
}
.panel-body p {
    margin: 0 0 10px;
}
.goodInfo {
    box-shadow: 0 0 20px rgb(0 0 0 / 8%);
    background-color: #fff;
    border-radius: 5px;
    border: none;
    position: relative;
    margin-bottom: 30px;
}
.course-info-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    padding-right: 58px;
    text-align: left;
    cursor: pointer;
}
.course-info-wrapper .img-wrapper {
    position: relative;
}
.course-info-wrapper .info-image {
    height: 64px;
    width: 80px;
    border-radius: 4px;
}

.course-info-wrapper .info-detail {
    line-height: 1.5;
    height: 100%;
    margin-left: 8px;
}
.course-info-wrapper .info-detail .title {
    max-width: 100%;
    height: 44px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.red {
    color: red;
}
.panel-success {
    border-color: #bae8b6;
}
.panel-success .panel-heading {
    color: #38b03f;
    background-color: #ddf4df;
    border-color: #bae8b6;
}
.detail-evaluate-box .detail {
    margin: 10px 0;
}
.detail-evaluate-box .evaluate-reply {
    color: #03b8cf;
}
</style>

<style>
body,
html {
    font-size: 12px;
}
.el-step__title,
.el-step__icon,
.el-table {
    font-size: 12px;
}
.el-step__icon {
    width: 20px;
    height: 20px;
}
</style>


